<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-4 flex v-align-c">
      <span></span>
      <i>标题栏</i>
    </h2>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">个性化设置</h3>
      </div>
      <div class="border-box near-box">
        <h4>样式风格</h4>
        <div class="mar-t--5 mar-b--10">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="8">
                  <el-radio v-model="details.propMap.titleStyle" label="10">样式一</el-radio>
                </el-col>
                <el-col :span="8">
                  <el-radio v-model="details.propMap.titleStyle" label="11">样式二</el-radio>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="border-box">
        <h4>标题文字</h4>
        <div class="mar-t-1 mar-b--15">
          <el-form-item>
            <div>
              <el-input placeholder="请输入标题文字" maxlength="4" class="mini-s-input" v-model="details.propMap.title"/>
            </div>
          </el-form-item>
        </div>
        <div class="pad-t-3 pad-b-3">
          <h4>标题链接</h4>
        </div>
        <div class="mar-t-1 mar-b--3">
          <el-form-item>
            <div class="mini-sbar-input cursor-p" :class="details.propMap.linkRemark ? '' : 'default-sbar-input'"
              @click="linkLayer">{{ details.propMap.linkRemark ? details.propMap.linkRemark : '请选择链接' }}</div>
          </el-form-item>
        </div>
      </div>
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">颜色设置</h3>
      </div>
      <div class="border-box">
        <div>
          <h4>背景</h4>
          <div class="mar-t-3 mar-b-5">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker
                  v-model="details.propMap.backgroundColor"
                  @active-change="activecolorChange(details, 'backgroundColor', '#FFFFFF', $event)"
                  @change="colorChange(details, 'backgroundColor', '#FFFFFF', $event)"
                  :predefine="predefineColors"
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.backgroundColor" @change="iptColorChange(details, 'backgroundColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'backgroundColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
        <div>
          <h4>文字</h4>
          <div class="mar-t-3 mar-b-5">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker 
                  v-model="details.propMap.fontColor"
                  @active-change="activecolorChange(details, 'fontColor', '#333333',$event)"
                  @change="colorChange(details, 'fontColor', '#333333',$event)"
                  :predefine="predefineColors"
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.fontColor" @change="iptColorChange(details, 'fontColor', '#333333',$event)"></el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'fontColor', '#333333')">重置</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
        <div>
          <h4>更多</h4>
          <div class="mar-t-3 mar-b-5">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker 
                  v-model="details.propMap.showMoreColor"
                  @active-change="activecolorChange(details, 'showMoreColor', '#333333', $event)"
                  @change="colorChange(details, 'showMoreColor', '#333333', $event)"
                  :predefine="predefineColors"
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.showMoreColor" @change="iptColorChange(details, 'showMoreColor', '#333333', $event)"></el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'showMoreColor', '#333333')">重置</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">文本设置</h3>
      </div>
      <div class="border-box near-box">
        <h4>对齐方式</h4>
        <div class="mar-t--5 mar-b--10">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="8">
                  <el-radio v-model="details.propMap.textAlign" label="10">居左</el-radio>
                </el-col>
                <el-col :span="8">
                  <el-radio v-model="details.propMap.textAlign" label="11">居中</el-radio>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="border-box near-box">
        <h4>边距</h4>
        <div class="mar-b--10">
          <el-form-item label="上下" label-width="40px" class="none-mar-b">
            <div class="flex font-12">
              <el-slider v-model="details.propMap.verticalMargin" class="flex-item" :max="50"></el-slider>
              <el-input class="mar-l-20 color-sel-input" :max="50" placeholder="请输入内容" v-model="details.propMap.verticalMargin" @input="marginChange(details, 'verticalMargin', $event)">
                <template slot="append">px</template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="左右" label-width="40px">
            <div class="flex font-12">
              <el-slider v-model="details.propMap.horizontalMargin" class="flex-item" :max="50"></el-slider>
              <el-input class="mar-l-20 color-sel-input" :max="50" placeholder="请输入内容" v-model="details.propMap.horizontalMargin" @input="marginChange(details, 'horizontalMargin', $event)">
                <template slot="append">px</template>
              </el-input>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>

    <!-- 链接设置弹层 -->
    <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px">
      <!-- appType 13 为主播小程序 -->
      <component-link-layer v-if="appType !== 13" :appType="appType" v-on:selectLink="setLinkTemp"></component-link-layer>
      <component-anchor-link-layer v-else v-on:selectLink="setLinkTemp"></component-anchor-link-layer>
    </el-dialog>

  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import { getToken } from '@/utils/auth'
  import ComponentLinkLayer from './../ComponentLinkLayer'
  import ComponentAnchorLinkLayer from './../ComponentAnchorLinkLayer'

  export default {
    components: {
      ComponentLinkLayer,
      ComponentAnchorLinkLayer
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      appType: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {
            linkType: '',
            linkParams: '',
            linkRemark: ''
          }
        },
        fullScreenLoading: null,
        pictureType: '1',
        linkSetVisible: false,
        link: {},
        predefineColors: []
      }
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.details = this.details1
      this.$set(this.details.propMap, 'textSize', this.details.propMap.textSize * 1)
      this.$set(this.details.propMap, 'verticalMargin', this.details.propMap.verticalMargin * 1)
      this.$set(this.details.propMap, 'horizontalMargin', this.details.propMap.horizontalMargin * 1)
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsTitle', function(details) {
        that.details = details
        that.$set(that.details.propMap, 'textSize', details.propMap.textSize * 1)
        that.$set(that.details.propMap, 'verticalMargin', details.propMap.verticalMargin * 1)
        that.$set(that.details.propMap, 'horizontalMargin', details.propMap.horizontalMargin * 1)
      })
      this.predefineColors = this.$store.state.globalData.predefineColors
    },
    methods: {
      linkLayer(item) {
        this.link = item
        this.linkSetVisible = true
      },
      setLinkTemp(item) {
        this.$set(this.details.propMap, 'linkParams', item.linkParams)
        this.$set(this.details.propMap, 'linkType', item.linkType)
        this.$set(this.details.propMap, 'linkRemark', item.linkRemark)
        this.linkSetVisible = false
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {}
        }
      },
      colorChange(obj, key, defaultColor, e) {
        // 颜色值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      activecolorChange(obj, key, defaultColor, e) {
        // 调色板中值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      iptColorChange(obj, key, defaultColor, e) {
        // 颜色输入框触发事件
        if (this.$utils.isHexColor(e)) {
          obj.propMap[key] = e
        } else {
          obj.propMap[key] = defaultColor
        }
      },
      resetColor(obj, key, defaultColor) {
        // 重置颜色按钮触发事件
        obj.propMap[key] = defaultColor
      },
      marginChange(obj, key, e) {
        // 滑块输入框触发事件
        if (this.$utils.isNumber(e)) {
          if (e * 1 > 50) {
            obj.propMap[key] = 50
          } else {
            obj.propMap[key] = e * 1
          }
        } else {
          obj.propMap[key] = 0
        }
      }
    }
  }
</script>
